<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='assets/images/favicon.png') }}">
    <title>{{ config.get('FLASK_WEB_NAME', '网站') }}</title>
    <!-- Bootstrap Core CSS -->
    <link href="{{ url_for('static', filename='assets/plugins/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="{{ url_for('static', filename='material/css/style.css') }}" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href="{{ url_for('static', filename='material/css/colors/blue.css') }}" id="theme" rel="stylesheet">
    <link href="{{ url_for('static', filename='assets/plugins/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
    </div>
    <!-- ============================================================== -->
    <!-- Main wrapper - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <section id="wrapper">

        <div class="login-register" style="background-image:url({{ url_for('static', filename='assets/images/background/login-register.jpg') }});">        
            <div class="login-box card">
            <div class="card-body">

                <form class="form-horizontal form-material" action="" method="post" novalidate>

                    {% with messages = get_flashed_messages(with_categories=True) %}
                        {% if messages %}
                            {% for message in messages %}
                                <div class="alert alert-{{ message[0]}}"> <i class="ti-user"></i> {{ message[1]}}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}

                    {{ form.hidden_tag() }}
                    <h3 class="box-title m-b-20">{{ config.get('FLASK_WEB_NAME', '网站') }}</h3>
                    <div class="form-group ">
                        <div class="col-xs-12">
                            {{ form.username(class='form-control', type='text', required='', placeholder='用户名') }}
                          </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            {{ form.password(type='password', class='form-control', required='', placeholder='密码') }}
                          </div>
                    </div>
                    <div class="form-group">
                        <div class="checkbox checkbox-primary pull-left p-t-0">
                            <input id="checkbox-signup" type="checkbox" name="LoginForm[rememberMe]" value="0">

                            <label for="checkbox-signup"> 记住我 </label>
                        </div> 
                    </div>
                    <div class="form-group text-center m-t-20">
                        <div class="col-xs-12">
                            <button class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" type="submit">登陆</button>
                        </div>
                    </div>
                </form>

            </div>
          </div>
        </div>
        
    </section>
    <!-- ============================================================== -->
    <!-- All Jquery -->
    <!-- ============================================================== -->
    <script src="{{ url_for('static', filename='assets/plugins/jquery/jquery.min.js') }}"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="{{ url_for('static', filename='assets/plugins/bootstrap/js/popper.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="{{ url_for('static', filename='material/js/jquery.slimscroll.js') }}"></script>
    <!--Wave Effects -->
    <script src="{{ url_for('static', filename='material/js/waves.js') }}"></script>
    <!--Menu sidebar -->
    <script src="{{ url_for('static', filename='material/js/sidebarmenu.js') }}"></script>
    <!--stickey kit -->
    <script src="{{ url_for('static', filename='assets/plugins/sticky-kit-master/dist/sticky-kit.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/plugins/sparkline/jquery.sparkline.min.js') }}"></script>
    <!--Custom JavaScript -->
    <script src="{{ url_for('static', filename='material/js/custom.min.js') }}"></script>
    <!-- ============================================================== -->
    <!-- Style switcher -->
    <!-- ============================================================== -->
    <script src="{{ url_for('static', filename='assets/plugins/sweetalert/sweetalert.min.js') }}"></script>
    <script src="{{ url_for('static', filename='assets/plugins/sweetalert/jquery.sweet-alert.custom.js') }}"></script>

    <script src="{{ url_for('static', filename='assets/plugins/styleswitcher/jQuery.style.switcher.js') }}"></script>
    <script type="text/javascript">
        window.setTimeout(function(){
            $('[data-dismiss="alert"]').alert('close');
        },7000);
    </script>
</body>

</html>